<template>
  <div class="bill-addition">
    <div class="title">账单信息</div>
    <Form :model="billData" :label-width="80" class="bill-info">
      <Row>
        <Col span="12">
          <FormItem class="bill-info__item" label="缴费公司">
            <Select v-model="billData.enterpriseId">
              <Option
                v-for="(item, key) in enterpriseList"
                :value="item.value"
                :key="key"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="缴费日期" class="bill-info__item">
            <Row>
              <Col span="11">
                <DatePicker
                  type="date"
                  placeholder="选择日期"
                  v-model="billData.chargeDate"
                ></DatePicker>
              </Col>
              <Col span="2" style="text-align: center">-</Col>
              <Col span="11">
                <TimePicker
                  type="time"
                  placeholder="Select time"
                  v-model="billData.chargeTime"
                ></TimePicker>
              </Col>
            </Row>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="24">
          <FormItem label="备注" class="bill-info__item">
            <Input
              v-model="billData.remark"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="请输入账单备注..."
            ></Input>
          </FormItem>
        </Col>
      </Row>
    </Form>

    <!-- <vxe-form
      class="bill-info"
      :data="billData"
      title-align="right"
      title-width="100"
    >
      <vxe-form-item
        title="Basic information"
        span="24"
        title-align="left"
        title-width="200px"
        :title-prefix="{ icon: 'fa fa-address-card-o' }"
      ></vxe-form-item>
      <vxe-form-item
        title="所在园区"
        field="parkId"
        span="12"
        :item-render="{
          name: 'select',
          attrs: { placeholder: '请输入角色' },
          options: parkList,
        }"
      ></vxe-form-item>
      <vxe-form-item
        title="所在企业"
        field="enterpriseId"
        span="12"
        :item-render="{ name: 'select', options: enterpriseList }"
      ></vxe-form-item>
      <vxe-form-item
        title="缴费日期"
        field="chargeDate"
        span="12"
        :item-render="{
          name: '$input',
          props: { type: 'date', placeholder: '请选择日期' },
        }"
      ></vxe-form-item>

      <vxe-form-item
        title="备注"
        field="remark"
        span="24"
        :item-render="{
          name: 'textarea',
          attrs: { placeholder: '请输入备注' },
        }"
      ></vxe-form-item>

    </vxe-form> -->

    <div class="billContents-options">
      <vxe-toolbar>
        <template #buttons>
          <vxe-button icon="fa fa-plus" @click="addBillContent(-1)"
            >新增缴费</vxe-button
          >

          <vxe-button @click="$refs.xTable.removeCheckboxRow()"
            >删除选中</vxe-button
          >
        </template>
      </vxe-toolbar>
    </div>
    <vxe-table
      class="billContents"
      border
      resizable
      show-overflow
      ref="xTable"
      show-footer
      max-height="400"
      :footer-method="footerMethod1"
      :data="billData.billContents"
      :edit-config="{ trigger: 'click', mode: 'cell' }"
    >
      <vxe-table-column type="checkbox" width="60"></vxe-table-column>
      <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
      <!-- <vxe-table-column
        field="name"
        title="费用名称"
        :edit-render="{ name: 'input', attrs: { type: 'text' } }"
      ></vxe-table-column> -->

      <vxe-table-column
        field="name"
        title="费用名称"
        class="vxe-select"
        style="height: 20px"
        :edit-render="{
          name: '$select',
          options: typeList,
          props: { clearable: true },
          events: { change: roleChangeEvent },
        }"
      ></vxe-table-column>
      <vxe-table-column
        field="payableAmount"
        title="应付金额"
        :edit-render="{ name: '$input', props: { type: 'float', digits: 2 } }"
      ></vxe-table-column>
      <vxe-table-column
        field="reducedAmount"
        title="减免金额"
        :edit-render="{ name: '$input', props: { type: 'float', digits: 2 } }"
      ></vxe-table-column>
      <vxe-table-column
        field="actualAmount"
        title="实付金额"
        :edit-render="{ name: '$input', props: { type: 'float', digits: 2 } }"
      ></vxe-table-column>
    </vxe-table>
    <div class="option">
      <vxe-button @click="submit" status="primary">添加</vxe-button>
      <vxe-button @click="reset">重置</vxe-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      billData: {
        billContents: [
          {
            name: '',
            payableAmount: 0,
            reducedAmount: 0,
            actualAmount: 0
          }
        ]
      },
      typeList: [],
      enterpriseList: [],
      value1: 1
    }
  },
  mounted () {
    this.getEnterpriseList()
    this.getTypeList()
  },
  methods: {
    submit () {
      console.log('submitData', this.billData)
      this.addBill()
    },
    reset () { },
    updateRoleList () {
      const $table = this.$refs.xTable
      // 获取表格中的全量数据
      const { fullData } = $table.getTableData()
      this.typeList.forEach((item) => {
        if (item.value) {
          // 如果当前选项已经被选过，则禁用
          item.disabled = fullData.some((row) => row.role === item.value)
        }
      })
    },
    roleChangeEvent ({ row }) {
      this.updateRoleList()
    },
    getTypeList () {
      const queryData = {
        parkId: 1
      }
      this.$Axios
        .request({
          method: 'get',
          url: '/bill/bill-type/get',
          params: queryData
        })
        .then((response) => {
          if (response.data.code == 200) {
            const dataList = response.data.msg.billTypes
            for (const i in dataList) {
              this.typeList.push({
                label: dataList[i].name,
                value: dataList[i].name
              })
            }
          } else {
            this.$Message.error(response.data.msg)
          }
        })
    },
    getEnterpriseList () {
      this.$Axios
        .request({
          method: 'get',
          url: 'enterprise/list/all'
        })
        .then((response) => {
          if (response.data.code == 200) {
            const dataList = response.data.msg
            for (const i in dataList) {
              this.enterpriseList.push({
                label: dataList[i].name,
                value: dataList[i].id
              })
            }
          } else {
            this.$Message.error(response.data.msg)
          }
        })
    },
    formatDateTime (date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      var h = date.getHours()
      h = h < 10 ? '0' + h : h

      return y + '-' + m + '-' + d
    },
    addBill () {
      const date = this.billData.chargeDate
      console.log(date)
      this.billData.chargeDate = this.formatDateTime(date) + ' ' + this.billData.chargeTime
      // this.billData.chargeDate = date.value.date+this.billData.chargeTime;
      this.billData.parkId = '1'
      console.log(this.billData.chargeDate)
      this.$Axios
        .request({
          method: 'post',
          url: '/bill/add',
          data: this.billData
        })
        .then((response) => {
          console.log(response)
          if (response.data.code == 200) {
            this.$Message.success('创建成功，账单号为' + response.data.msg)
          } else {
            this.$Message.error(response.data.msg)
          }
        })
    },
    async addBillContent (row) {
      const $table = this.$refs.xTable
      const record = {
        name: '',
        payableAmount: 0,
        reducedAmount: 0,
        actualAmount: 0
      }
      //   const { row: newRow } = await $table.insertAt(record)
      //   await $table.setActiveCell(newRow, 'name')
      // $table.setActiveCell(newRow, 'name')
      this.billData.billContents.push(record)
    }
  }
}
</script>
<style scoped>
.bill-addition {
  display: flex;
  flex-direction: column;
  align-content: center;
  padding: 20px 30px;
  background-color: #fff;
}
.title {
  margin: 10px 0px 20px 0px;
  font-size: large;
  font-weight: bold;
}
.billContents {
  width: 100%;
}
.option {
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 10px;
  width: 50%;
}
.billContents-options {
  margin-top: 30px;
}
</style>
